<template>
	<view class="walletList">
		<HeaderBar title="选择钱包" showBack backgroundColor="#F6F6F6" fixed />
		<view class="content">
			<view class="navTab">
				<view class="navLeft" :class="{'active':active==1}" @tap="tabNav(1)">
					钱包列表
				</view>
				<view class="navCenter" :class="{'active':active==2}" @tap="tabNav(2)">
					地址本
				</view>
			</view>
			<view class="cell_list" v-if="active==1">
				<view class="cell_item" v-for="(i,index) in addressList" :key="index" @tap="switchAddress(i)">
					<view class="img">
						<image :src="'/static/images/chain/' +i.chainName+'.png'" class="icon" mode=""></image>
					</view>
					<view class="msg">
						<view class="name">
							{{i.name}}
							<view class="now" v-if="i.address == address">当前</view>
							<view class="observe" v-if="i.importMethod == 4">观察钱包</view>
						</view>
						<view class="cell_left">
							<view class="address">
								{{$utils.formatAddress(i.address)}}
							</view>
							<view class="copy">
								<text class="iconfont icon-fuzhi" @tap.stop="copy(i.address)"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- {{list}} -->
			<view class="contentBox" v-if="active==2">
				<view class="list" v-if="list.length>0">
					<view class="item" v-for="(item,index) in list" :key="index" @tap="switchAddress(item)">
						<image :src="'/static/images/chain/' +item.chainName+'.png'" mode="" class="chainIcon"></image>
						<view class="con">
							<view class="name">
								{{item.addressName}}
							</view>
							<view class="address">
								{{$utils.formatAddress(item.address)}}
							</view>
						</view>
						<image src="../../static/images/personal/iptRight.png" mode="widthFix" class="icon"></image>
					</view>
				</view>
				<view class="empty" v-if="list.length==0">
					<image src="/static/images/personal/empty.png" class="icon" mode="widthFix"></image>
					<view class="text">
						您当前没有添加地址信息
					</view>
					<view class="btn" @tap="addAddress">
						点击添加
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: [],
				list: [],
				active: 1,
			}
		},
		computed: {
			address() {
				return this.$store.getters.getAddress;
			},
			chainId() {
				return this.$store.getters.getChainId;
			},
			chainInfo() {
				return this.$store.getters.chainInfo
			},
			choinInfo() {
				return this.$store.getters.choinInfo
			},
		},
		mounted() {
			this.getSelectChain()
			this.getIdList()
			uni.$on("addressBookID", this.getIdList)
		},
		methods: {
			tabNav(num) {
				this.active = num;
				this.textarea = ''
				this.getIdList()
			},
			addAddress() {
				uni.navigateTo({
					url: `/pages/addAddress/addAddress?selctChainID=${this.chainId}`
				})
			},
			switchAddress(wallet) {
				if (wallet.address == this.address) return
				uni.$emit("selectWallet", wallet)
				uni.navigateBack();
			},
			getIdList() {
				uni.$db.select('list', { // 普通查询
					from: 'addressBook',
					where: [{
						chainId: `= "${this.chainId}"`,
					}],
				}).then(res => {
					if (res.length > 0) {
						this.list = res.reverse()
					} else {
						this.list = []
					}
				})
			},
			getSelectChain() {
				uni.$db.select('list', { // 普通查询
					from: 'addressList',
					where: [{
						chainId: `= "${this.chainId}"`
					}]
				}).then(res => {
					this.addressList = res
				})
			},
			copy(address) {
				uni.setClipboardData({
					data: address,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
						});
					},
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "/static/iconfont/iconfont.css";

	.walletList {
		width: 100%;
		height: 100%;
		background: #F6F6F6;
		font-size: 26upx;

		.content {
			.navTab {
				margin: 0 40upx;
				background: #E9EAEC;
				padding: 8upx 22upx;
				text-align: center;
				display: flex;
				font-size: 26upx;
				border-radius: 20upx;

				.navLeft {
					flex: 1;
					line-height: 72upx;
				}

				.navCenter {
					flex: 1;
					line-height: 72upx;
				}

				.navRight {
					flex: 1;
					line-height: 72upx;
				}

				.active {
					background: #FFF;
					border-radius: 20upx;
				}
			}

			.contentBox {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 0 0;

				.list {
					flex: 1;
					margin: 0 30upx;

					.item {
						display: flex;
						align-items: center;
						background: #FFF;
						padding: 20upx 26upx;
						margin-top: 20upx;
						border-radius: 20upx;
						font-size: 28upx;

						.chainIcon {
							width: 68upx;
							height: 68upx;
						}

						.icon {
							width: 20upx;
							height: 20upx;
						}

						.con {
							flex: 1;
							margin-left: 20upx;
							font-size: 28upx;

							.name {
								font-size: 28upx;
								display: flex;
								align-items: center;
								margin-bottom: 6upx;
							}

							.address {
								color: #A7A7A7;
							}
						}
					}
				}

				.empty {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 200upx;

					.icon {
						width: 130upx;
						height: 146upx;
					}

					.text {
						color: #B2B2B2;
						margin-top: 32upx;
					}

					.btn {
						color: #2D7C18;
						border: 2upx solid #2D7C18;
						border-radius: 10upx;
						width: 274upx;
						height: 76upx;
						text-align: center;
						line-height: 76upx;
						margin-top: 52upx;
					}
				}

			}

			.cell_list {
				margin: 0 30upx;

				.cell_item {
					display: flex;
					align-items: center;
					background: #FFF;
					padding: 20upx 26upx;
					margin-top: 20upx;
					border-radius: 20upx;

					.img {
						display: flex;
						margin-right: 20upx;

						.icon {
							width: 68upx;
							height: 68upx;
						}
					}

					.msg {
						.name {
							font-size: 28upx;
							display: flex;
							align-items: center;
							margin-bottom: 6upx;

							.now {
								margin-left: 20upx;
								padding: 0 10upx;
								border-radius: 5upx;
								font-size: 20upx;
								background: #368521;
								color: #FFF;
								border: 1px solid #368521;
							}

							.observe {
								margin-left: 20upx;
								padding: 0 10upx;
								border-radius: 5upx;
								border: 1px solid #368521;
								font-size: 20upx;
								color: #368521;
							}
						}
					}


					.cell_left {
						display: flex;
						align-items: center;
						color: #B2B2B2;

						.address {
							font-size: 28upx;
						}

						.copy {
							display: flex;
							margin-left: 20upx;

							.iconfont {
								font-size: 28upx;
							}

							.icon {
								width: 24upx;
								height: 24upx;
							}
						}
					}
				}
			}
		}
	}
</style>